{load header}

<script type="text/javascript" src="/static/js/echarts.common.min.js"></script>
<!--/H-->
<!-- 内容区 -->
<div id="main-content">
    <div id="top-alert" class="fixed alert alert-error" style="display: none;">
        <button class="close fixed" style="margin-top: 4px;">&times;</button>
        <div class="alert-content">这是内容</div>
    </div>
    <div id="main" class="main">

        <!-- nav --><!-- nav -->

        <div class="main-title">
            <h2>统计图表</h2>
        </div>
        <div class="cf">
            <!-- 高级搜索 -->
            <div class="search-form fr cf">
                <div class="sleft">
                    <div class="drop-down sub-plat">
                        <span id="plat-txt" class="sort-txt" data="{$_GET['plat']}">{if $plat_name}{$plat_name}{else}全部来源{/if}</span>
                        <i class="arrow arrow-down"></i>
                        <ul id="sub-plat" class="nav-list hidden" style="z-index: 99">
                            <li><a href="javascript:;" value="0">全部来源</a></li>
                            <!--{loop $plat_list $plat_item}-->
                            <li><a href="javascript:;" value="{$plat_item['value']}">{$plat_item['name']}</a></li>
                            <!--{/loop}-->
                        </ul>
                    </div>
                    <div class="drop-down sub-flag">
                        <span id="flag-txt" class="sort-txt" data="{$_GET['flag']}">{if $flag_name}{$flag_name}{else}全部flag{/if}</span>
                        <i class="arrow arrow-down"></i>
                        <ul id="sub-flag" class="nav-list hidden" style="z-index: 99">
                            <li><a href="javascript:;" value="0">全部flag</a></li>
                            <!--{loop $flag_list $flag_item}-->
                            <li><a href="javascript:;" value="{$flag_item['value']}">{$flag_item['name']}</a></li>
                            <!--{/loop}-->
                        </ul>
                    </div>
                    <input type="text" id="time-start" name="time-start" class="text input-2x"
                           value="{$time_start}" placeholder="起始时间"/> -
                    <input type="text" id="time-end" name="time-end" class="text input-2x"
                           value="{$time_end}" placeholder="结束时间"/>
                    <a class="sch-btn" style="float: none;" href="javascript:;" id="search" url=""><i class="btn-search"></i></a>
                </div>
            </div>
        </div>
        <div class="data-table table-striped tab-content" style="width: 1200px;height: 600px;margin:50px auto;" id="chart_main"></div>
        <input type="hidden" id="link" name="link" value="{$link}"/>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('chart_main'));


            $(function () {
                creat_chart();
            })
            $("#search").click(function () {
                creat_chart();
            })

            function creat_chart() {
                var link = $("#link").val();
                var time_start = $("#time-start").val();
                var time_end = $("#time-end").val();
                var plat = $("#plat-txt").attr("data");
                var flag = $("#flag-txt").attr("data");
                $.post(link,{time_start:time_start,time_end:time_end,plat:plat,flag:flag},
                        function(result){
                            if (result.option) {
                                myChart.setOption(result.option);
                            }
                        }, "json");
            }
            // 使用刚指定的配置项和数据显示图表。

        </script>
    </div>
</div>
<link href="{eval echo base_url()}static/datetimepicker/css/datetimepicker.css" rel="stylesheet" type="text/css">
<link href="{eval echo base_url()}static/datetimepicker/css/dropdown.css" rel="stylesheet" type="text/css">
<script type="text/javascript"
        src="{eval echo base_url()}static/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript"
        src="{eval echo base_url()}static/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"
        charset="UTF-8"></script>
<script type="text/javascript">
    $(function () {
        $('#time-start').datetimepicker({
            format: 'yyyy-mm-dd',
            language: "zh-CN",
            minView: 2,
            autoclose: true
        });

        $('#time-end').datetimepicker({
            format: 'yyyy-mm-dd',
            language: "zh-CN",
            minView: 2,
            autoclose: true,
            pickerPosition: 'bottom-left'
        })

        $(".search-form").find(".sub-plat").hover(function () {
            $("#sub-plat").removeClass("hidden");
        }, function () {
            $("#sub-plat").addClass("hidden");
        });
        $("#sub-plat li").find("a").each(function () {
            $(this).click(function () {
                var text = $(this).text();
                $("#plat-txt").text(text).attr("data", $(this).attr("value"));
                $("#sub-plat").addClass("hidden");
            })
        });
        $(".search-form").find(".sub-flag").hover(function () {
            $("#sub-flag").removeClass("hidden");
        }, function () {
            $("#sub-flag").addClass("hidden");
        });
        $("#sub-flag li").find("a").each(function () {
            $(this).click(function () {
                var text = $(this).text();
                $("#flag-txt").text(text).attr("data", $(this).attr("value"));
                $("#sub-flag").addClass("hidden");
            })
        });
    })
</script>
<!--F-->{load footer}